import React from 'react';
import {ToastComponent, AlertComponent, Spinner} from 'amis';
import {Route, Switch, Redirect, HashRouter as Router} from 'react-router-dom';
import {observer} from 'mobx-react';
import {IMainStore} from '../store';

const Preview = React.lazy(() => import('./Preview'));
const PageManage = React.lazy(() => import('./PageManage'));
const Home = React.lazy(() => import('./Home'));
const Editor = React.lazy(() => import('./Editor'));

export default observer(function ({store}: { store: IMainStore }) {
    return (
        <Router>
            <div className="routes-wrapper">
                <ToastComponent key="toast" position={'top-right'}/>
                <AlertComponent key="alert"/>
                <React.Suspense
                    fallback={<Spinner overlay className="m-t-lg" size="lg"/>}
                >
                    <Switch>
                        <Redirect to={`/index`} from={`/`} exact/>
                        <Route path="/edit/:id" component={Editor}/>
                        <Route path="/preview" component={Preview}/>
                        <Route path="/home" component={Home}/>
                        <Route path="/pageManage" component={PageManage}/>
                        <Route path="/pageManage/:id" component={PageManage}/>
                        <Route component={PageManage}/>
                        {/*<Route component={Home}/>*/}
                    </Switch>
                </React.Suspense>
            </div>
        </Router>
    );
});
